<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Uplon - Responsive Admin Dashboard Template</title>

        <!-- Switchery css -->
        <link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />

        <!-- Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- App CSS -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <!-- Modernizr js -->
        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left" id="do-nicescrol">
        <div class="row">
            <div class="col-12">
                <div class="card-box">

                    <h4 class="header-title m-t-0 m-b-30">输入类型</h4>

                    <div class="row">
                        <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-6">
                            <form>
                                <fieldset class="form-group">
                                    <label for="exampleInputEmail1">邮箱地址</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1"
                                           placeholder="Enter email">
                                    <small class="text-muted">我们永远不会和任何人分享你的电子邮件.
                                    </small>
                                </fieldset>
                                <fieldset class="form-group">
                                    <label for="exampleInputPassword1">密码</label>
                                    <input type="password" class="form-control"
                                           id="exampleInputPassword1" placeholder="Password">
                                </fieldset>
                                <fieldset class="form-group">
                                    <label for="exampleSelect1">例如选择</label>
                                    <select class="form-control" id="exampleSelect1">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                </fieldset>
                                <fieldset class="form-group">
                                    <label for="exampleSelect2">例如多个选择</label>
                                    <select multiple class="form-control" id="exampleSelect2">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                </fieldset>
                                <fieldset class="form-group">
                                    <label for="exampleTextarea">示例文本</label>
                                    <textarea class="form-control" id="exampleTextarea"
                                              rows="3"></textarea>
                                </fieldset>

                                <fieldset class="form-group">
                                    <label >例如只读</label>
                                    <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
                                </fieldset>
                                <button type="submit" class="btn btn-primary">提交</button>
                            </form>
                        </div><!-- end col -->

                        <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-6 m-t-sm-40">
                            <form>
                                <fieldset disabled>
                                    <div class="form-group">
                                        <label for="disabledTextInput">禁用输入</label>
                                        <input type="text" id="disabledTextInput" class="form-control"
                                               placeholder="Disabled input">
                                    </div>
                                    <div class="form-group">
                                        <label for="disabledSelect">不可选菜单</label>
                                        <select id="disabledSelect" class="form-control">
                                            <option>Disabled select</option>
                                        </select>
                                    </div>
                                </fieldset>

                                <fieldset>
                                    <label >示例控件大小</label>
                                    <input class="form-control form-control-lg m-b-20" type="text"
                                           placeholder=".form-control-lg">
                                    <input class="form-control m-b-20" type="text" placeholder="Default input">
                                    <input class="form-control form-control-sm m-b-20" type="text"
                                           placeholder=".form-control-sm">

                                    <div class="row">
                                        <div class="col-2">
                                            <input type="text" class="form-control m-b-15"
                                                   placeholder=".col-xs-2">
                                        </div>
                                        <div class="col-3">
                                            <input type="text" class="form-control m-b-15"
                                                   placeholder=".col-xs-3">
                                        </div>
                                        <div class="col-4">
                                            <input type="text" class="form-control m-b-15"
                                                   placeholder=".col-xs-4">
                                        </div>
                                    </div>
                                </fieldset>

                                <fieldset>
                                    <div class="form-group has-success">
                                        <label class="form-control-label" for="inputSuccess1">Input with
                                            success</label>
                                        <input type="text" class="form-control form-control-success"
                                               id="inputSuccess1">
                                    </div>
                                    <div class="form-group has-warning">
                                        <label class="form-control-label" for="inputWarning1">Input with
                                            warning</label>
                                        <input type="text" class="form-control form-control-warning"
                                               id="inputWarning1">
                                    </div>
                                    <div class="form-group has-danger">
                                        <label class="form-control-label" for="inputDanger1">Input with
                                            danger</label>
                                        <input type="text" class="form-control form-control-danger"
                                               id="inputDanger1">
                                    </div>
                                </fieldset>
                            </form>
                        </div><!-- end col -->

                    </div><!-- end row -->
                </div>
            </div><!-- end col -->
        </div>
        <!-- end row -->

        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <h4 class="header-title m-t-0 m-b-30">文本输入</h4>

                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">文本</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-search-input" class="col-2 col-form-label">搜索</label>
                        <div class="col-10">
                            <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-email-input" class="col-2 col-form-label">信箱</label>
                        <div class="col-10">
                            <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-url-input" class="col-2 col-form-label">跳转</label>
                        <div class="col-10">
                            <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-tel-input" class="col-2 col-form-label">电话</label>
                        <div class="col-10">
                            <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-password-input" class="col-2 col-form-label">密码</label>
                        <div class="col-10">
                            <input class="form-control" type="password" value="hunter2" id="example-password-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-number-input" class="col-2 col-form-label">数字</label>
                        <div class="col-10">
                            <input class="form-control" type="number" value="42" id="example-number-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-datetime-local-input" class="col-2 col-form-label">日期和时间</label>
                        <div class="col-10">
                            <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-date-input" class="col-2 col-form-label">日期</label>
                        <div class="col-10">
                            <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-month-input" class="col-2 col-form-label">月</label>
                        <div class="col-10">
                            <input class="form-control" type="month" value="2011-08" id="example-month-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-week-input" class="col-2 col-form-label">周</label>
                        <div class="col-10">
                            <input class="form-control" type="week" value="2011-W33" id="example-week-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-time-input" class="col-2 col-form-label">时间</label>
                        <div class="col-10">
                            <input class="form-control" type="time" value="13:45:00" id="example-time-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-color-input" class="col-2 col-form-label">颜色</label>
                        <div class="col-10">
                            <input class="form-control" type="color" value="#563d7c" id="example-color-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-12">
                <div class="card-box">

                    <div class="row">
                        <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-6">
                            <h4 class="header-title m-t-0 m-b-30">内联形式</h4>

                            <h6 class="m-b-20 text-muted">标签</h6>

                            <form class="form-inline">
                                <label class="sr-only" for="inlineFormInput">名称</label>
                                <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">

                                <label class="sr-only" for="inlineFormInputGroup">用户姓名</label>
                                <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                                    <div class="input-group-addon">@</div>
                                    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
                                </div>

                                <div class="form-check mb-2 mr-sm-2 mb-sm-0">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox"> 记住我
                                    </label>
                                </div>

                                <button type="submit" class="btn btn-primary">按钮</button>
                            </form>

                            <form class="form-inline m-t-30">
                                <label class="mr-sm-2" for="inlineFormCustomSelect">偏爱</label>
                                <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
                                    <option selected>Choose...</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>

                                <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
                                    <input type="checkbox" class="custom-control-input">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">记得我的偏好</span>
                                </label>

                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>

                            <h6 class="m-b-20 m-t-30 text-muted">隐藏标签</h6>

                            <form class="form-inline">
                                <div class="form-group">
                                    <label class="sr-only" for="exampleInputEmail3">邮箱地址</label>
                                    <input type="email" class="form-control" id="exampleInputEmail3"
                                           placeholder="Enter email">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="exampleInputPassword3">密码</label>
                                    <input type="password" class="form-control"
                                           id="exampleInputPassword3" placeholder="Password">
                                </div>
                                <div class="checkbox">
                                    <input id="checkbox0" type="checkbox">
                                    <label for="checkbox0">
                                        记住我
                                    </label>
                                </div>
                                <button type="submit" class="btn btn-primary">登录</button>
                            </form>

                        </div>

                        <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-6 m-t-sm-40">

                            <h4 class="header-title m-t-0 m-b-30">使用网格</h4>

                            <form>
                                <div class="form-group row">
                                    <label for="inputEmail3"
                                           class="col-sm-2 form-control-label">信箱</label>
                                    <div class="col-sm-10">
                                        <input type="email" class="form-control" id="inputEmail3"
                                               placeholder="Email">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 form-control-label">密码</label>
                                    <div class="col-sm-10">
                                        <input type="password" class="form-control" id="inputPassword3"
                                               placeholder="Password">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2">单选框</label>
                                    <div class="col-sm-10">
                                        <div class="radio">
                                            <input type="radio" name="radio" id="radio1" value="option1" checked>
                                            <label for="radio1">
                                                Option one is this and that&mdash;be sure to include why
                                                it's great
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <input type="radio" name="radio" id="radio2" value="option2">
                                            <label for="radio2">
                                                Option two can be something else and selecting it will
                                                deselect option one
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <input type="radio" name="radio" id="radio3" value="option3" disabled>
                                            <label for="radio3">
                                                Option three is disabled
                                            </label>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2">复选框</label>
                                    <div class="col-sm-10">
                                        <div class="checkbox checkbox-primary">
                                            <input id="checkbox21" type="checkbox">
                                            <label for="checkbox21">
                                                Check me out
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>

                    </div><!-- end row -->


                </div>
            </div>
        </div>
        <!-- end row -->

        </div>
        <!-- END wrapper -->


        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/tether.min.js"></script><!-- Tether for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>
        <script type="text/javascript">
            $(document).ready(
                 function() { 
                  $("#do-nicescrol").niceScroll({oneaxismousemode: false,cursorcolor: "#999",horizrailenabled: false});
                 }
                );
        </script>

    </body>
</html>